<script lang="ts">
    import Drawer from '$lib/components/Feedback/Drawer/Drawer.svelte';
    import ThemeSwitcher from '$lib/components/Business/ThemeSwitcher.svelte';
    import RectButton from '$lib/components/Basic/Button/RectButton.svelte';

    const { drawerOpen, setDrawerOpen } = $props<{
        drawerOpen: boolean;
        setDrawerOpen: (open: boolean) => void;
    }>();
    
</script>

<div class="zone">
    <RectButton icon="office/notifications" type="text" iconSize={21} style="padding:6px;height: 30px;"></RectButton>
    <RectButton icon="interface/palette" type="text" onclick={() => setDrawerOpen(true)} iconSize={21} style="padding:6px;;height: 30px;"></RectButton>
    <RectButton icon="user/avatar" type="text" label="超级管理员" iconSize={22} iconColor="var(--color-primary-500)" labelSize={14} style="padding:6px 10px;height: 30px;"></RectButton>
</div>
<Drawer
	open={drawerOpen}
	title="主题配置"
	direction="right"
	size="400px"
	onClose={() => setDrawerOpen(false)}
>
	<div>
		<ThemeSwitcher></ThemeSwitcher>
	</div>
</Drawer>

<style scoped lang="scss">
	.zone {
        display: flex;
        align-items: center;
		height: 100%;
	}
</style>
